<template>
  <el-container>
    <el-header><Header></Header></el-header>
    <el-container>
      <el-aside style="width: 15%;background-color: #ffffff;">
        <el-menu default-active="2" class="el-menu-vertical-demo" v-for="(orderType, index) in orderCount" :key="orderType.typeId">
          <el-menu-item>
            <el-button @click="type(orderType.typeId)" style="color:fuchsia" type="text">{{ orderType.type }}({{ orderType.count }})</el-button>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <div class="home-box">
        <el-row :gutter="10">
          <el-col :xs="24" :sm="10" :md="24" :lg="24" :offset="1" >
             <el-alert
                title="由于网络延迟问题,部分大文件点击下载可能报错404,请您务必返回订单页面重新下载"
                type="warning"
                close-text="知道了">
              </el-alert>
            <el-table
              v-show="isShow"
              v-loading="loading"
                        element-loading-text="未抢购成功或已验证过此资料"
                            element-loading-spinner="el-icon-loading"
                            element-loading-background="rgba(0, 0, 0, 0.3)"
            :data="tableData" style="width: 100%;text-align: center;">
              <el-table-column prop="orderId" label="订单号" width="180" ></el-table-column>
              <el-table-column prop="goodName" label="资料名称" width="250" ></el-table-column>
              <el-table-column prop="orderType" label="订单类型" width="80" ></el-table-column>
              <el-table-column prop="price" label="价格" width="70" ></el-table-column>
              <el-table-column align="right" >
                <template slot-scope="scope">
                  <el-popover v-if="!scope.row.download"  placement="top-start" width="200" trigger="hover" content="秒杀成功,验证后可下载,未验证,15分钟后订单会自动取消">
                    <el-button v-if="scope.row.price==0" style="float: left;" size="mini" type="warning" slot="reference" @click="getFile(scope.$index, scope.row)" icon="el-icon-paperclip">
                    免密
                    </el-button>
                    <el-button v-else style="float: left;" size="mini" type="infor" slot="reference" @click="filePwd(scope.$index, scope.row)" icon="el-icon-key">
                    密码
                     </el-button>
                  </el-popover>

                   <el-button v-else style="float: left;" size="mini" type="success" @click="download(scope.$index, scope.row)" icon="el-icon-download">下载</el-button>

                   <el-button size="mini" style="float: left;margin-left: 8px;" type="danger" @click="del(scope.$index, scope.row)" icon="el-icon-delete">取消</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="10" :md="10" :lg="10" :offset="5">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 15]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="this.total"
            ></el-pagination>
          </el-col>
        </el-row>
      </div>
    </el-container>
    <el-footer><Footer></Footer></el-footer>
  </el-container>
</template>

<script>
import Footer from '@/components/Footer';
import Header from '@/components/Header';
import fileDownload from 'js-file-download';
export default {
  data() {
    return {
      isShow:true,
      loading:false,
      orderCount: null,
      typeId: 2,
      load: true,
      load2: false,
      tableData: null,
      current: 1,
      size: 5,
      currentPage: 1,
      pageSize: 5,
      total: null,
      userId: this.$store.getters.getUser().userId,
      file: null,
      goodId: null,
      orId: null,
      orderId: null,

    };
  },
  // 组件声明
  components: {
    Footer: Footer,
    Header: Header
  },
  created() {
    this.findAll(),this.findCount();
  },
  methods: {
    findAll() {
      let _this = this;
      if (this.typeId == 1) {
        this.axios
          .get(this.apiUrl1 + '/order/page?current=' + this.current + '&size=' + this.size + '&userId=' + this.userId)
          .then(res => {
          _this.tableData = res.data.ordersPage;
          _this.total = res.data.total;
          if(res.data.total==0){
             _this.isShow=false;
          }else{
             _this.isShow=true;
          }
          _this.loading=false;
          })
          .catch(err => {
            console.log(err);
          });
      }
      if (this.typeId == 2) {
        this.axios
          .get(this.apiUrl1 + '/order/nopage?current=' + this.current + '&size=' + this.size + '&userId=' + this.userId)
          .then(res => {
            _this.tableData = res.data.ordersPage;
            if(res.data.total==0){
              _this.loading=true;
              _this.isShow=true;
            }else{
                _this.total = res.data.total;
              _this.loading=false;
               _this.isShow=true;
            };

          })
          .catch(err => {
            console.log(err);
          });
      }
      if (this.typeId == 3) {
        this.axios
          .get(this.apiUrl1 + '/order/yespage?current=' + this.current + '&size=' + this.size + '&userId=' + this.userId)
          .then(res => {
            _this.tableData = res.data.ordersPage;
            _this.loading=false;
            _this.total = res.data.total;
            if(res.data.total==0){
               _this.isShow=false;
            }else{
               _this.isShow=true;
            }

          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    findCount() {
      let _this = this;
      this.axios
        .get(this.apiUrl1 + '/order/findCount?userId=' + this.userId)
        .then(res => {
          _this.orderCount = res.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    type(val) {
      (this.typeId = val), this.findAll();
    },

    download(index, row) {
       let _this = this;
      // 利用a标签自定义下载文件名
        var fileParam = {
          userId:row.userId,
          orId:row.orId,
          orderId:row.orderId,
          download:row.download,
        };
        this.axios.post(this.apiUrl1+'/order/findOne',fileParam)
          .then(res => {
                window.location.href=this.apiUrl4+res.data


          })
          .catch(err => {
           console.log(err);
          });


    },

   getFile(index,row){
     var fileParam = {
       goodId:row.goodId,
       orId:row.orId,
       orderId:row.orderId,
       goodName:row.goodId,
       download:row.download,
     };

     let _this = this;
     this.axios.post(this.apiUrl1 + '/file/load2',fileParam)
       .then(res => {

        if(res.data.status){
          _this.$message({
            message: res.data.msg,
            type: 'success'
          });
           _this.findAll(),
           _this.findCount()
        }else{
          _this.$message({
            message: res.data.msg,
            type: 'warning'
          });
        }
       })
       .catch(err => {
         console.log(err);
       });
   },
   filePwd(index, row) {
      this.$prompt('请输入文件密码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(({ value }) => {

          var fileParam = {
            goodId:row.goodId,
            orId:row.orId,
            orderId:row.orderId,
            goodName:row.goodId,
            download:row.download,
			       pwd:value
          };

          let _this = this;
          this.axios.post(this.apiUrl1 + '/file/load',fileParam)
            .then(res => {

             if(res.data.status){
               _this.$message({
                 message: res.data.msg,
                 type: 'success'
               });
                _this.findAll(),
                _this.findCount()
             }else{
               _this.$message({
                 message: res.data.msg,
                 type: 'warning'
               });
             }
            })
            .catch(err => {
              console.log(err);
            });


        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
    },
    del(index, row) {


      var orderParam = {
        orId: row.orId,
        orderId: row.orderId,
        userId: row.userId
      };
      let _this = this;
      this.axios
        .post(this.apiUrl1 + '/order/del', orderParam)
        .then(res => {
          if (res.data.state) {
            _this.findAll(),
              _this.findCount(),
              _this.$message({
                message: res.data.msg,
                type: 'success'
              });
          } else {
            this.$message({
              message: res.data.msg,
              type: 'warning'
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleSizeChange: function(pageSize) {
      (this.size = pageSize), this.findAll();
    },
    handleCurrentChange: function(currentPage) {
      (this.current = currentPage), this.findAll();
    }
  }
};
</script>

<style>
.home-box {
  width: 100%;
  padding: 2px;
  float: right;
  /*  margin: 100px auto; */
  padding: 20px 50px 10px 10px;
  border: 1px solid #ffffff;
  /* background-image: url(../../static/zm1.jpg); */
}
.el-header,
.el-footer {
  /*  background-color: #B3C0D1; */
  /* background-image: url(../../static/zm6.jpg); */
  /*  color: #333; */
  /* text-align: center; */
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  line-height: 50px;
}

.el-aside {
  color: #333;
  text-align: center;
  /* line-height: 200px; */
  height: 650px;
}

.el-main {
  color: #333;
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  /*  background: #99a9bf; */
}
.bg-purple {
  /* background: #d3dce6; */
}
.bg-purple-light {
  /*  background: #e5e9f2; */
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 5px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  /* clear: both */
}

.box-card {
  width: 350px;
  margin-top: 20px;
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>
